<template>
  <div class="order wrap">
    <div class="orderr">
      <div class="box" v-for="(item, index) in arr" :key="index">
        <img :src="item" alt="" />
      </div>
    </div>
    <Pagination :total="total" @change="changePagination"></Pagination>
    <div class="desc">当前页： {{ current }}</div>
  </div>
</template>

<script type='text/ecmascript-6'>
import Pagination from "@/components/pagination.vue";

export default {
  data() {
    return {
      imgSrc: [
        "https://img1.baidu.com/it/u=682406134,1059346707&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888",
        "https://img1.baidu.com/it/u=971771562,95103303&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888",
        "https://img1.baidu.com/it/u=1247451774,281282451&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714",
        "https://img1.baidu.com/it/u=1492326953,1422977003&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
        "https://img0.baidu.com/it/u=370819311,103114757&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=706",
        "https://img2.baidu.com/it/u=3999665835,1267919974&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
        "https://img2.baidu.com/it/u=3999665835,1267919974&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
        "https://img1.baidu.com/it/u=1526329729,2487221298&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422",
        "https://img1.baidu.com/it/u=1526329729,2487221298&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422",
      ],
      total: 0, // 必传传递参数total
      current: 1,
      number: 0,
      arr: [],
      aaa: 0,
    };
  },
  created() {
          this.total = this.imgSrc.length;
      this.arr = this.imgSrc.filter((item, index) => index < 3 * this.current);
  },
  methods: {
    changePagination(current) {
      this.current = current;
    },
  },
  watch: {
    current() {
      this.number = (this.current - 1) * 3;
      this.aaa = this.number + 3;
      this.arr = this.imgSrc.filter((item, index) => {
        return this.number <= index && index < this.aaa;
      });
      console.log(this.arr);
    },
  },
  components: {
    Pagination,
  },
};
</script>

<style lang='less' scoped>
.orderr {
  // display: inline;
  // width: 200px;
  // height: 300px;
  // width: 100%;
  display: flex;
  flex-wrap: wrap;
  .box {
    flex: 1;

    // overflow: hidden;
    display: inline-block;
    margin-right: 20px;
  }

  img {
    width: 300px;
    height: 500px;
  }
}
</style>